<template>
  <view class="login-modal" v-if="is_show">
    <view
      class="login-modal-bg"
      :style="'background-image: url(' + asyncImgs.common.login_bg + ');'"
    >
      <view>
        <button class="btn" @click="goLogin">去登录</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "login-modal",
  data() {
    return {};
  },
  props: {
    page: {
      type: Object
    }
  },
  computed: {
    is_show() {
      const token = uni.getStorageSync("token");
      if (!token) {
        return true;
      }
      return false;
    }
  },
  created() {
    // #ifdef H5
    if (!this.$utils.isLogin(false)) {
      this.$utils.toUrl("/login/login/login_page", "redirectTo");
    }
    // #endif
  },
  methods: {
    async goLogin() {
      // #ifdef MP-WEIXIN
      uni.setStorageSync("wx_login_code", await this.getCode());
      // #endif

      this.$store.commit("setNoLoginTabarPath", this.reload());
      this.$store.commit("setRouteType", "redirectTo");
      this.$utils.toUrl("/login/login/login_page", "redirectTo");
    },

    getCode: function () {
      return new Promise((reslove) => {
        uni.login({
          provider: "weixin",
          success(res) {
            reslove(res.code);
          }
        });
      });
    },

    reload() {
      const routes = getCurrentPages();
      const route = routes[routes.length - 1].route;
      const param = routes[routes.length - 1].options;
      const params = this.$u.queryParams(param);
      return `/${route + params}`;
    }
  }
};
</script>

<style scoped>
.login-modal {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.login-modal-bg {
  border-radius: 3px;
  width: 500rpx;
  height: 700rpx;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.login-modal-bg view {
  width: 100%;
  position: absolute;
  bottom: 50rpx;
  left: 0;
  text-align: center;
}

.login-modal-bg view button {
  background-color: #f82627;
  color: #fff;
  border-radius: 5px;
  width: 350rpx;
  height: 70rpx;
  font-size: 30rpx;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
</style>
